<template>
    <van-sticky>
        <van-nav-bar
                :title="title"
                left-arrow
                @click-left="onClickLeft"
                @click-right="onClickRight"
        >
          <template #left>
            <van-icon name="/fanhui.png" size="20"/>
          </template>
            <template #right>
                <van-icon name="/sousuo.png" size="18"/>
            </template>
        </van-nav-bar>
    </van-sticky>

    <div class="content">
        <router-view/>
    </div>
    <van-tabbar route v-model="active">
        <van-tabbar-item to="/" name="index">
          <span>首页</span>
          <template #icon="props">
            <div v-show="props.active"><div id="home" style="height: 32px;width: 32px"></div></div>
            <div v-show="!props.active"><img src="/045_zhuye.png" style="height: 30px;width: 30px"></div>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/team" icon="flag-o" name="team">
          <span>交流群</span>
          <template #icon="props">
            <div v-show="props.active"><div id="group" style="height: 32px;width: 32px"></div></div>
            <div v-show="!props.active"><img src="/044_tianwen.png" style="height: 30px;width: 30px"></div>
          </template>
        </van-tabbar-item>
        <van-tabbar-item replace class="van-tabbar-addBlog" @click="checkLogin('/blog/edit',2)">
            <div class="center-wrap">
                <div class="bgc-wrap">
                    <van-icon name="plus" size="27"  class="icon"/>
                </div>
            </div>
        </van-tabbar-item>
        <van-tabbar-item  icon="smile-comment-o" name="message" class="message" @click="checkLogin('/message',3)">
          <span>消息</span>
          <template #icon="props">
            <div v-show="active==='message'"><div id="msg2" style="height: 32px;width: 32px"></div></div>
            <div v-show="active!=='message'"><img src="/045_liaotian.png" style="height: 30px;width: 30px"></div>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/user" icon="user-o" name="user">
          <span>个人</span>
          <template #icon="props">
            <div v-show="props.active"><div id="person" style="height: 32px;width: 32px"></div></div>
            <div v-show="!props.active"><img src="/045_wode-14.png" style="height: 30px;width: 30px"></div>
          </template>
        </van-tabbar-item>
    </van-tabbar>
</template>
<script setup>
import {showConfirmDialog} from "vant";
import {useRouter} from "vue-router";
import routes from "../config/routes.ts";
import {onMounted, ref} from "vue";
import {getCurrentUser} from "../services/user.ts";
import myAxios from "../plugins/my-axios.js";
import lottie from "lottie-web"
import daxiaohu from "../lottie/daxiaohu.json"
import shuijiaohu from "../lottie/shuijiaohu.json"
import kugaihu from "../lottie/kugaihu.json"
import xihuanhu from "../lottie/xihuanhu.json"

const hasMessage = ref(false)
let router = useRouter();
const DEFAULT_TITLE = "校园兴趣圈交流"
const title = ref(DEFAULT_TITLE)
const active = ref("")

onMounted( () => {
  const lot = lottie.loadAnimation({
    container: document.getElementById("home"),
    renderer: "svg",
    loop: true,
    autoplay: true,
    animationData: daxiaohu
  })
  const lot2 = lottie.loadAnimation({
    container: document.getElementById("group"),
    renderer: "svg",
    loop: true,
    autoplay: true,
    animationData: shuijiaohu
  })
  const lot3 = lottie.loadAnimation({
    container: document.getElementById("msg"),
    renderer: "svg",
    loop: true,
    autoplay: true,
    animationData: xihuanhu
  })
  const lot4 = lottie.loadAnimation({
    container: document.getElementById("msg2"),
    renderer: "svg",
    loop: true,
    autoplay: true,
    animationData: xihuanhu
  })
  const lot5 = lottie.loadAnimation({
    container: document.getElementById("person"),
    renderer: "svg",
    loop: true,
    autoplay: true,
    animationData: kugaihu
  })

})

router.beforeEach(async (to) => {
    const toPath = to.path
    const route = routes.find((routes) => {
        return routes.path === toPath
    })
    document.title = "校园兴趣圈交流"
    title.value = route?.title ?? DEFAULT_TITLE
    if (to.path !== '/user/login') {
        let res = await myAxios.get("/message");
        if (res?.data.code === 0) {
            if (res.data.data) {
                hasMessage.value = true
            } else {
                hasMessage.value = false
            }
        }
    }
})
const onClickLeft = () => {
    router.back()
};
const onClickRight = () => {
    router.push("/search")
};

const checkLogin = async (to, index) => {
    let user = await getCurrentUser();
    if (!user) {
        showConfirmDialog({
            message:
                "该功能需要登陆后使用,是否登录",
            confirmButtonText: "去登录"
        })
            .then(() => {
                router.replace("/user/login")
            })
            .catch(() => {
            });
    } else {
        await router.push(to)
        if (active.value === 'message') {
            let message = document.getElementsByClassName("message")
            message.item(0).style.color = '#1989fa'
        }
    }
}
</script>

<style scoped>

.content {
    padding-bottom: 70px;
}

.center-wrap {
    width: 80px;
    height: 80px;
    margin-top: -20px;
    z-index: 100000;
    background-color: white;
    border-radius: 50% 50% 0 0;
    position: relative;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
/*#3c89fc*/
.bgc-wrap {
    width: 50px;
    height: 50px;
    border-radius: 50% 50% 50% 50%;
    background-image: linear-gradient(to right,#F0A949,#A2D77F,#6AEEE3);
    position: absolute;
    left: 15px;
    top: 10px;
}

.icon {
    margin-left: -3px;
    margin-top: -3px;
    color: white;
}

[class*=van-hairline]::after {
    border: none !important
}
</style>
